<!doctype html>
<html>
<head>
  <script src="../../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body>
  <dom-module id="my-element">
    <template>
    <style>
    :host {
      --bar: {
        color: orange;
      };

      --foo: {
        border: 10px solid orange;
        padding: 2px;
        color: red;
      };

      --bar: {
        padding: 10px;
        overflow: hidden;
      };
    }

    .child {
      position: absolute;
      color: green;
      border: 2px solid red;
      /*@apply --foo;*/
      /*@apply --bar;*/
      @apply(--foo);
      @apply(--bar);
    }
    </style>

    <div class="ancestor">
      <div class="grandparent">
        <div class="parent">
          <div class="child">Hi!</div>
        </div>
      </div>
    </div>
  </template>
  <script>
  Polymer({is:'my-element'});
  </script>
</dom-module>

<my-element></my-element>

</body>
</html>
